<template>
  <div class="view">
    <div class="conception-speak">
      <div class="speak">
        <div class="white--text conception">
          {{ article === null ? "" : article.title }}
        </div>
      </div>
      <div class="down">
        <v-icon large>mdi-arrow-down</v-icon>
      </div>
    </div>
    <template v-if="article !== null">
      <v-row justify="center" class="mt-3">
        <v-col cols="0" xl="2" lg="2" class="cols-0-hidden">
          <v-row justify="end" class="mt-3">
            <div class="mt-13 grey lighten-5 rounded" id="catLog">
              <div
                style="text-align: center; margin: 5px 0;font-size: 20px; font-weight: bold;"
              >
                目录
              </div>
              <CatLog
                v-if="catLog.length"
                :data="catLog"
                :active-id="catLogActiveId"
                @click="catLogClick"
                class="brace-right"
                :tag-class="catLogTagClass"
              />
            </div>
          </v-row>
        </v-col>
        <v-col cols="12" xl="8" lg="8" class="mt-13">
          <v-container
            style="box-shadow: 0 0 10px #efefef; border-radius: 10px;"
          >
            <v-card flat>
              <v-card-text class="grow">
                <v-row justify="end">
                  <span
                    class="pink lighten-3 white--text font-weight-bold rounded-lg pa-1"
                    style="font-size: .6em"
                    >{{ article.createTime }}</span
                  >
                </v-row>
              </v-card-text>
              <div class="article-content pa-3" v-html="mdToHtml"></div>
              <!--              <markdown-it-vue class="md-body" :content="mdToHtml" />-->
            </v-card>
          </v-container>
        </v-col>
        <v-col cols="0" xl="2" lg="2" class="cols-0-hidden">
          <v-row justify="start" class="mt-3">
            <div class="mt-13 grey lighten-5 rounded" id="column">
              <div
                style="text-align: center; margin: 5px 0;font-size: 20px; font-weight: bold;"
              >
                专栏
              </div>
              <CatLog
                v-if="column.length"
                :data="column"
                :active-id="this.$route.params.articleId"
                @click="columnClick"
                class="brace-right"
              />
            </div>
          </v-row>
        </v-col>
      </v-row>
      <v-row justify="center" class="ml-5 mr-5">
        <v-col cols="12" xl="8" lg="8">
          <v-container>
            <v-card-actions class="mb-2 ml-1 mr-1 pl-1">
              <v-list-item class="grow">
                <v-row align="center" justify="start" class="ml-1">
                  <v-icon class="mr-1 green--text" small>
                    mdi-eye
                  </v-icon>
                  <span class="caption mr-2 green--text">{{
                    article.views
                  }}</span>
                  <v-icon class="mr-1 ml-2 info--text" small>
                    mdi-forum
                  </v-icon>
                  <span class="caption mr-2 info--text">{{
                    article.commentCount
                  }}</span>
                  <v-icon class="mr-1 ml-2 indigo--text" small>
                    mdi-tag
                  </v-icon>
                  <span class="caption indigo--text">{{
                    article.tagText
                  }}</span>
                </v-row>
              </v-list-item>
            </v-card-actions>
            <v-container class="grey darken-4 rounded-lg ml-1 pa-2">
              <v-list dense flat class="grey darken-4">
                <v-list-item dense>
                  <v-list-item-icon>
                    <v-icon color="rgb(36, 159, 248)">mdi-account</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title class="info--text font-weight-bold"
                      >文章作者：My</v-list-item-title
                    >
                  </v-list-item-content>
                </v-list-item>
                <v-list-item dense>
                  <v-list-item-icon>
                    <v-icon color="rgb(57, 181, 74)">mdi-link-variant</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title class="success--text font-weight-bold"
                      >链接地址：{{ getUrl }}</v-list-item-title
                    >
                  </v-list-item-content>
                </v-list-item>
                <v-list-item dense>
                  <v-list-item-icon>
                    <v-icon color="rgb(243, 178, 67)">mdi-alert-circle</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title class="orange--text font-weight-bold"
                      >版权声明：本博客所有文章除特别声明外均为原创！转载请注明！谢谢！</v-list-item-title
                    >
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-container>
          </v-container>
        </v-col>
      </v-row>
      <v-row justify="center">
        <v-col cols="12" xl="8" lg="8">
          <v-container>
            <v-list dense flat v-if="comments.length">
              <v-card flat v-for="data in comments" :key="data.id">
                <v-list-item dense>
                  <v-list-item-avatar size="45">
                    <v-img src="/bg_1920x1080.jpg"></v-img>
                  </v-list-item-avatar>
                  <v-list-item-content
                    style="padding: 8px 0;align-self: normal;"
                  >
                    <v-list-item-title
                      class="font-weight-bold subtitle-1 black--text"
                      ><span class="mr-3">{{ data.nickname }}</span>
                      <v-img
                        class="d-inline-block mr-1"
                        width="15"
                        :src="browserImg(data.browserType)"
                      />
                      <v-img
                        class="d-inline-block"
                        width="15"
                        :src="systemImg(data.systemType)"
                      />
                    </v-list-item-title>
                    <v-list-item-subtitle class="caption pink--text ">{{
                      data.createTime
                    }}</v-list-item-subtitle>
                  </v-list-item-content>
                  <v-list-item-action-text class="caption"
                    ><v-btn small plain @click="replyClick(data.id)"
                      ><span>回复</span></v-btn
                    ></v-list-item-action-text
                  >
                </v-list-item>
                <v-card-text class="ml-16 black--text caption">
                  {{ data.content }}
                </v-card-text>
                <v-card-actions class="ml-12" v-show="commentReply === data.id">
                  <v-form ref="form" style="width: 100%">
                    <v-container>
                      <v-row>
                        <v-col cols="12" md="4">
                          <v-text-field
                            v-model="comment.nickname"
                            outlined
                            :counter="50"
                            label="*昵称"
                            required
                            dense
                            :error-messages="nicknameError"
                            @blur="$v.comment.nickname.$touch()"
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12" md="4">
                          <v-text-field
                            v-model="comment.email"
                            outlined
                            :counter="200"
                            label="*邮箱"
                            required
                            dense
                            :error-messages="emailError"
                            @blur="$v.comment.email.$touch()"
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12" md="4">
                          <v-text-field
                            v-model="comment.url"
                            outlined
                            :counter="100"
                            label="网址"
                            dense
                            :error-messages="urlError"
                            @blur="$v.comment.url.$touch()"
                          ></v-text-field>
                        </v-col>
                      </v-row>
                      <v-row dense>
                        <v-col cols="12">
                          <v-textarea
                            auto-grow
                            outlined
                            clearable
                            no-resize
                            dense
                            :counter="500"
                            label="*评论"
                            v-model="comment.content"
                            :error-messages="contentError"
                            @blur="$v.comment.content.$touch()"
                          />
                        </v-col>
                      </v-row>
                      <v-row dense>
                        <v-col cols="6">
                          <div style="position: relative">
                            <v-btn
                              icon
                              color="success"
                              @click="emojiPickerCloseClick"
                            >
                              <v-icon>
                                mdi-emoticon-cool-outline
                              </v-icon>
                            </v-btn>
                            <VEmojiPicker
                              v-show="emojiPickerClose"
                              @click.stop="emojiPickerCloseClick"
                              @select="selectIcon"
                              style="position: absolute;z-index: 3;"
                            ></VEmojiPicker>
                          </div>
                        </v-col>
                        <v-col cols="6">
                          <v-btn
                            class="float-right success"
                            :loading="commentLoading"
                            @click="submit(data.id, data.id)"
                            >评论</v-btn
                          >
                        </v-col>
                      </v-row>
                    </v-container>
                  </v-form>
                </v-card-actions>
                <v-card-actions class="ml-12">
                  <v-list dense flat width="100%">
                    <v-card flat v-for="child in data.children" :key="child.id">
                      <v-list-item dense>
                        <v-list-item-avatar size="38">
                          <v-img src="/bg_1920x1080.jpg"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-content
                          style="padding: 8px 0;align-self: normal;"
                        >
                          <v-list-item-title
                            class="font-weight-bold subtitle-2 black--text"
                          >
                            <span class="mr-3"
                              >{{ child.nickname }} @
                              <span class="grey--text text--darken-2">{{
                                child.replyNickname
                              }}</span></span
                            >
                            <v-img
                              class="d-inline-block mr-1"
                              width="15"
                              :src="browserImg(child.browserType)"
                            />
                            <v-img
                              class="d-inline-block"
                              width="15"
                              :src="systemImg(child.systemType)"
                            />
                          </v-list-item-title>
                          <v-list-item-subtitle class="caption pink--text">{{
                            child.createTime
                          }}</v-list-item-subtitle>
                        </v-list-item-content>
                        <v-list-item-action-text class="caption"
                          ><v-btn small plain @click="replyClick(child.id)"
                            ><span>回复</span></v-btn
                          ></v-list-item-action-text
                        >
                      </v-list-item>
                      <v-card-text class="ml-14 black--text caption">
                        {{ child.content }}
                      </v-card-text>
                      <v-card-actions
                        class="ml-12"
                        v-show="commentReply === child.id"
                      >
                        <v-form style="width: 100%" ref="form">
                          <v-container>
                            <v-row>
                              <v-col cols="12" md="4">
                                <v-text-field
                                  v-model="comment.nickname"
                                  outlined
                                  :counter="50"
                                  label="*昵称"
                                  required
                                  dense
                                  :error-messages="nicknameError"
                                  @blur="$v.comment.nickname.$touch()"
                                ></v-text-field>
                              </v-col>
                              <v-col cols="12" md="4">
                                <v-text-field
                                  v-model="comment.email"
                                  outlined
                                  :counter="200"
                                  label="*邮箱"
                                  required
                                  dense
                                  :error-messages="emailError"
                                  @blur="$v.comment.email.$touch()"
                                ></v-text-field>
                              </v-col>
                              <v-col cols="12" md="4">
                                <v-text-field
                                  v-model="comment.url"
                                  outlined
                                  :counter="100"
                                  label="网址"
                                  dense
                                  :error-messages="urlError"
                                  @blur="$v.comment.url.$touch()"
                                ></v-text-field>
                              </v-col>
                            </v-row>
                            <v-row dense>
                              <v-col cols="12">
                                <v-textarea
                                  auto-grow
                                  outlined
                                  clearable
                                  no-resize
                                  dense
                                  :counter="500"
                                  label="*评论"
                                  v-model="comment.content"
                                  :error-messages="contentError"
                                  @blur="$v.comment.content.$touch()"
                                />
                              </v-col>
                            </v-row>
                            <v-row dense>
                              <v-col cols="6">
                                <div style="position: relative">
                                  <v-btn
                                    icon
                                    color="success"
                                    @click="emojiPickerCloseClick"
                                  >
                                    <v-icon>
                                      mdi-emoticon-cool-outline
                                    </v-icon>
                                  </v-btn>
                                  <VEmojiPicker
                                    v-show="emojiPickerClose"
                                    @click.stop="emojiPickerCloseClick"
                                    @select="selectIcon"
                                    style="position: absolute;z-index: 3;"
                                  ></VEmojiPicker>
                                </div>
                              </v-col>
                              <v-col cols="6">
                                <v-btn
                                  class="float-right success"
                                  :loading="commentLoading"
                                  :disabled="commentLoading"
                                  @click="submit(data.id, child.id)"
                                  >评论</v-btn
                                >
                              </v-col>
                            </v-row>
                          </v-container>
                        </v-form>
                      </v-card-actions>
                    </v-card>
                  </v-list>
                </v-card-actions>
              </v-card>
            </v-list>
            <p v-else class="text-center pink--text caption">
              快来评论吧！(☆▽☆)
            </p>
          </v-container>
        </v-col>
      </v-row>
      <v-row justify="center" v-show="!commentReply">
        <v-col cols="12" xl="8" lg="8">
          <v-container>
            <form ref="form">
              <v-container>
                <v-row>
                  <v-col cols="12" md="4">
                    <v-text-field
                      v-model="comment.nickname"
                      outlined
                      :counter="50"
                      label="*昵称"
                      required
                      dense
                      :error-messages="nicknameError"
                      @blur="$v.comment.nickname.$touch()"
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" md="4">
                    <v-text-field
                      v-model="comment.email"
                      outlined
                      :counter="200"
                      label="*邮箱"
                      required
                      dense
                      :error-messages="emailError"
                      @blur="$v.comment.email.$touch()"
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" md="4">
                    <v-text-field
                      v-model="comment.url"
                      outlined
                      :counter="100"
                      label="网址"
                      dense
                      :error-messages="urlError"
                      @blur="$v.comment.url.$touch()"
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row dense>
                  <v-col cols="12">
                    <v-textarea
                      auto-grow
                      outlined
                      clearable
                      no-resize
                      dense
                      :counter="500"
                      label="*评论"
                      v-model="comment.content"
                      :error-messages="contentError"
                      @blur="$v.comment.content.$touch()"
                    />
                  </v-col>
                </v-row>
                <v-row dense>
                  <v-col cols="6">
                    <div style="position: relative">
                      <v-btn
                        icon
                        color="success"
                        @click="emojiPickerCloseClick"
                      >
                        <v-icon>
                          mdi-emoticon-cool-outline
                        </v-icon>
                      </v-btn>
                      <VEmojiPicker
                        v-show="emojiPickerClose"
                        @click.stop="emojiPickerCloseClick"
                        @select="selectIcon"
                        style="position: absolute;z-index: 3;left: 30px;bottom: 0;"
                      ></VEmojiPicker>
                    </div>
                  </v-col>
                  <v-col cols="6">
                    <v-btn
                      class="float-right success"
                      :loading="commentLoading"
                      :disabled="commentLoading"
                      @click="submit(0, 0)"
                      >评论</v-btn
                    >
                  </v-col>
                </v-row>
              </v-container>
            </form>
          </v-container>
        </v-col>
      </v-row>
      <Footer />
    </template>
    <v-snackbar v-model="snackbar" top timeout="1000" color="success">
      {{ snackbarText }}
      <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import Vue from "vue";
import md from "@/assets/js/markdownIt";
import "markdown-it-vue/dist/markdown-it-vue.css";
import "@/assets/css/markdownIt.scss";
import VEmojiPicker from "v-emoji-picker";
import Vuelidate from "vuelidate";
import ClipboardJS from "clipboard";
import { required, maxLength, email, url } from "vuelidate/lib/validators";
import CatLog from "../components/CatLog";
import { getArticleById } from "@/api/article";
import { getColumnByArticleId } from "@/api/column";
import { addComment, getCommentByArticleId } from "@/api/comment";
Vue.use(VEmojiPicker);
Vue.use(Vuelidate);
export default {
  name: "ArticleView",
  components: { CatLog, Footer },
  created() {
    document.getElementById("app").style.backgroundImage = "url()";
    document.documentElement.scrollTop = 0;
  },
  mounted() {
    this.$nextTick(() => {
      this.clipboard = new ClipboardJS(".copy-btn");
      this.clipboard.on("success", () => {});
    });
    getArticleById(this.$route.params.articleId).then(res => {
      if (res.code === 200) {
        this.article = res.data.article;
        this.meta.title = this.article.title;
        this.meta.keywords = this.article.title;
        const imageLink = this.article.imageLink;
        const app = document.getElementById("app");
        const indexOf = imageLink.lastIndexOf(".");
        app.style.backgroundImage = `url(${imageLink.substr(
          0,
          indexOf
        )}_1920x1080_75_c${imageLink.substr(indexOf)})`;
        app.style.backgroundRepeat = "no-repeat";
        app.style.backgroundAttachment = "fixed";
        app.style.backgroundPosition = "center top";
        app.style.backgroundSize = "cover";
        app.style.boxShadow = "inset 0px -60px 45px -15px #fff";
      }
    });
    getColumnByArticleId(this.$route.params.articleId).then(res => {
      if (res.code === 200) {
        res.data.list.forEach(v => {
          this.column.push({
            text: v.article.title,
            id: v.article.id.toString()
          });
        });
      }
    });
    this.getComment();
    if (this.details.length) this.getCatLogActiveId();
    window.addEventListener("scroll", this.scroll);
  },
  destroyed() {
    this.clipboard.destroy();
    window.removeEventListener("scroll", this.scroll);
  },
  methods: {
    getComment() {
      getCommentByArticleId(this.$route.params.articleId).then(res => {
        this.comments = res.data.comments;
      });
    },
    selectIcon(val) {
      this.comment.content += val.data;
      this.emojiPickerClose = false;
    },
    emojiPickerCloseClick() {
      this.emojiPickerClose = !this.emojiPickerClose;
    },
    touch() {
      this.$v.comment.nickname.$touch();
      this.$v.comment.email.$touch();
      this.$v.comment.url.$touch();
      this.$v.comment.content.$touch();
    },
    invalid() {
      return (
        !this.$v.comment.nickname.$invalid &&
        !this.$v.comment.email.$invalid &&
        !this.$v.comment.url.$invalid &&
        !this.$v.comment.content.$invalid
      );
    },
    formReset() {
      this.$v.comment.nickname.$reset();
      this.$v.comment.email.$reset();
      this.$v.comment.url.$reset();
      this.$v.comment.content.$reset();
    },
    async submit(commentId, replyCommentId) {
      this.touch();
      if (this.invalid()) {
        this.comment.systemType = this.systemType();
        this.comment.browserType = this.browserType();
        this.comment.articleId = this.article.id;
        this.comment.parentId = commentId;
        this.comment.replyCommentId = replyCommentId;
        this.commentLoading = true;
        addComment(this.comment).then(res => {
          if (res.code === 200) {
            this.getComment();
            this.commentLoading = false;
            this.formReset();
            this.comment = { content: "" };
          }
        });
      }
    },
    replyClick(commentId) {
      if (this.commentReply === commentId) this.commentReply = 0;
      else this.commentReply = commentId;
    },
    browserType() {
      const u = navigator.userAgent;
      if (u.indexOf("Trident") > -1) return 1;
      else if (u.indexOf("Safari") > -1 && u.indexOf("Mac") > -1) return 2;
      else if (u.indexOf("AppleWebKit") > -1) return 3;
      else if (u.indexOf("Gecko") > -1 && u.indexOf("KHTML") === -1) return 4;
      else if (u.indexOf("Presto")) return 5;
      else return 3;
    },
    systemType() {
      const u = navigator.userAgent;
      if (u.indexOf("Windows") > -1) return 1;
      else if (u.indexOf("Mac") > -1) return 2;
      else if (u.indexOf("Linux") > -1)
        if (u.indexOf("Android") > -1) return 4;
        else return 3;
      else return 1;
    },
    browserImg(type) {
      switch (type) {
        case 1:
          return "/comment/ie.png";
        case 2:
          return "/comment/safari.png";
        case 3:
          return "/comment/chrome.png";
        case 4:
          return "/comment/firefox.png";
        case 5:
          return "/comment/opera.png";
      }
    },
    systemImg(type) {
      switch (type) {
        case 1:
          return "/comment/windows.png";
        case 2:
          return "/comment/mac.png";
        case 3:
          return "/comment/linux.png";
        case 4:
          return "/comment/android.png";
      }
    },
    addCatLog(arr, size, start, outArr) {
      for (let i = start; i < arr.length; ++i) {
        const item = arr[i];
        if (item.size - size === 1) outArr.push(item);
        else if (item.size - size >= 2)
          i = this.addCatLog(
            arr,
            item.size - 1,
            i,
            outArr[outArr.length === 0 ? 0 : outArr.length - 1].child
          );
        else if (size > item.size) return i - 1;
      }
      return outArr;
    },
    getCatLog(content) {
      let index = 1;
      const hs = content.match(/<h(\d)>(.*)?<\/h\d>/g);
      if (hs)
        hs.forEach(ele => {
          let detail = ele.match(/<h(\d)>(.*)?<\/h\d>/);
          this.details.push({
            size: parseInt(detail[1]),
            text: detail[2],
            id: `h${detail[1]}${index++}`,
            child: []
          });
        });
      if (this.details.length)
        this.catLog = this.addCatLog(
          this.details,
          this.details[0].size - 1,
          0,
          []
        );
    },
    getCatLogActiveId() {
      let currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let i = 0;
      for (; i < this.details.length; ++i) {
        let item = this.details[i];
        if (
          this.getOffsetTopByBody(document.getElementById(item.id)) > currentTop
        )
          break;
      }
      this.catLogActiveId = this.details[i].id;
      this.catLogActiveTop = i * 27;
    },
    getOffsetTopByBody(el) {
      let offsetTop = 0;
      while (el && el.tagName !== "body") {
        offsetTop += el.offsetTop;
        el = el.offsetParent;
      }
      return offsetTop;
    },
    scroll() {
      let currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let catLogEle = document.getElementById("catLog");
      let column = document.getElementById("column");
      if (catLogEle) {
        if (!this.catLogTop)
          this.catLogTop = this.getOffsetTopByBody(catLogEle);
        if (!this.columnTop) this.columnTop = this.getOffsetTopByBody(column);
        if (currentTop > this.columnTop - 65)
          column.style = "float: right; position: fixed; top: 20px;";
        else column.style = "position: static;";
        if (currentTop > this.catLogTop - 65) {
          if (catLogEle.offsetHeight > document.body.clientHeight) {
            console.log(this.catLogActiveTop);
            let catLogContentDeviation =
              this.catLogActiveTop - document.body.clientHeight / 2;
            if (catLogContentDeviation > 0)
              catLogEle.style =
                "position: absolute; top: " +
                (currentTop - 45 - catLogContentDeviation) +
                "px;";
            else
              catLogEle.style =
                "position: absolute; top: " + (currentTop - 45) + "px;";
          } else catLogEle.style = "float: right; position: fixed; top: 20px;";
        } else {
          catLogEle.style = "position: static;";
        }
      }
      if (this.details.length) this.getCatLogActiveId();
    },
    catLogClick(id) {
      let el = document.getElementById(id);
      el.scrollIntoView({ behavior: "smooth" });
      setTimeout(() => {
        document.documentElement.scrollTop = this.getOffsetTopByBody(el) - 65;
      }, 300);
    },
    columnClick(id) {
      this.$router.push(`/article/${id}`);
    }
  },
  computed: {
    getUrl() {
      return window.location.href;
    },
    mdToHtml() {
      if (this.article) {
        let index = 1,
          content = md.render(this.article.content);
        this.getCatLog(content);
        return content.replace(
          /<h(\d)>(.*)?<\/h\d>/g,
          (match, size, text) =>
            `<h${size} id="h${size}${index++}">${text}</h${size}>`
        );
        // let catLogContent = document.getElementById("cat-log-content");
        // catLogContent.style.width = catLogContent.offsetWidth;
      }
      return "";
    },
    nicknameError() {
      const errors = [];
      if (!this.$v.comment.nickname.$dirty) return errors;
      !this.$v.comment.nickname.maxLength &&
        errors.push("昵称不能超过50个字符！");
      !this.$v.comment.nickname.required && errors.push("昵称不能为空！");
      return errors;
    },
    emailError() {
      const errors = [];
      if (!this.$v.comment.email.$dirty) return errors;
      !this.$v.comment.email.email && errors.push("请输入正确的邮箱！");
      !this.$v.comment.email.maxLength && errors.push("邮箱不能超过200个字符!");
      !this.$v.comment.email.required && errors.push("邮箱不能为空！");
      return errors;
    },
    urlError() {
      const errors = [];
      if (!this.$v.comment.url.$dirty) return errors;
      !this.$v.comment.url.url && errors.push("请输入正确的网站地址！");
      !this.$v.comment.url.maxLength &&
        errors.push("网站地址不能超过100个字符！");
      return errors;
    },
    contentError() {
      const errors = [];
      if (!this.$v.comment.content.$dirty) return errors;
      !this.$v.comment.content.maxLength &&
        errors.push("评论内容不能超过500个字符！");
      !this.$v.comment.content.required && errors.push("评论内容不能为空！");
      return errors;
    }
  },
  data() {
    return {
      article: null,
      comments: [],
      commentReply: 0,
      snackbar: false,
      emojiPickerClose: false,
      comment: {
        content: ""
      },
      commentLoading: false,
      snackbarText: "",
      meta: {
        title: "",
        keywords: ""
      },
      catLog: [],
      catLogTop: null,
      columnTop: null,
      details: [],
      catLogActiveId: "",
      column: [],
      catLogTagClass: "cat-log-class",
      catLogActiveTop: 0
    };
  },
  metaInfo() {
    return {
      title: this.meta.title,
      meta: [{ name: "keywords", content: this.meta.keywords }]
    };
  },
  validations: {
    comment: {
      nickname: {
        required,
        maxLength: maxLength(50)
      },
      email: {
        required,
        maxLength: maxLength(200),
        email
      },
      url: {
        maxLength: maxLength(100),
        url
      },
      content: {
        required,
        maxLength: maxLength(500)
      },
      clipboard: null
    }
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route(to, from) {
      this.$router.go(0);
    }
  }
};
</script>

<style scoped>
.view {
  width: 100%;
  height: 95vh;
  font-family: "Comic Sans MS", "华文行楷", "黑体", "JetBrains Mono", serif !important;
}
.conception-speak .speak .conception {
  font-family: "Comic Sans MS", "华文行楷", "黑体", "JetBrains Mono", serif !important;
}
.v-application--is-ltr .v-list-item__icon:first-child {
  margin-right: 15px;
  padding: 0 !important;
}
.v-list-item__icon,
.v-list-item .v-list-item__icon {
  height: 20px;
  margin-top: 8px;
  margin-bottom: 0;
  padding: 0 !important;
}
.v-list-item {
  padding: 0;
  min-height: 20px;
}
.v-card__text {
  padding: 0;
}
.v-list-item__content {
  align-self: flex-end;
  padding: 0 !important;
}
.v-card__actions {
  padding: 0;
}
.v-list-item__title {
  line-height: 1rem;
  padding: 0 !important;
}
.row {
  margin: 0 !important;
}
@media (max-width: 1263px) {
  .cols-0-hidden {
    display: none;
  }
}
</style>

<style>
.hljs {
  background: #1e1e1e !important;
  color: #dcdcdc !important;
}
table {
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}
table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #efefef;
}
table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}
</style>
